<script>
import {getView} from "../../utils/webutil";
import {deleteResource, getFileServer} from "../../api/file";

export default {
    name: "ResourceItem",
    data() {
        return {}
    },

    props: {
        index:Number,
        value: {
            type: Object,
            default() {
                return {
                    title: '我的系统',
                    fileType: 'doc',
                    summary: 'HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时',
                    uploadTime: '2021-12-16',
                    tag: '11,232,222'
                }
            }
        }
    },
    methods: {
        getUrl(type) {
            return getView(type);
        },
        editResource(){
            this.$router.push({path:"/share", query:{id:this.value.id}})
        },
        getTagArray(tags){
            return JSON.parse(tags)
        },
        download(){
            getFileServer()
            .then(res=>{
                if(res.code===200){
                    window.open(res.data.concat(this.value.id),"_blank")
                }
            })
        },
        deleteResource(){
          deleteResource(this.value.id,"resource")
            .then(res=>{
                if(res.code===200){
                    this.$message.success("删除成功")
                    this.$emit("deleteItem",this.index)
                }
                else this.$message.error("删除失败")
            })
        },
        copyUrl(){
            const clipboard = navigator.clipboard;
            clipboard.writeText('http://localhost:8888/res/detail/'+this.value.id)
            this.$message.success("复制成功")
        }
    },
    mounted() {
    }
}
</script>


<template>
    <div style="width: 100%;border-radius: 15px;margin: 1px 0;" class="flex column flex-start align-center">
        <div class="flex row align-center flex-start" style="height: 90px;width: 100%">
            <span style="color: #626971!important;">{{index}}</span>
            <div style="margin-right: 10px">
                <img style="width: 70px;border-radius: 15px" :src="getUrl(value.fileType)" alt="">
            </div>
            <div class="flex column flex-start align-center" style="width: 100%">
                <router-link :to="'/res/detail/'+value.id" style="width: 100%;" class="title">{{ value.title }}</router-link>
                <span style="width: 100%" class="sumFont">{{ value.summary }}</span>
                <div class="flex align-center space-between" style="width: 100%;height: 10px">
                    <div>
                        <el-tag size="mini" type="success" effect="plain" v-for="item in getTagArray(value.tag) " :key="item">{{item}}</el-tag>
                        <span class="circlePoint"></span>
                        <span style="" class="dateFont">下载:{{ value.downloadCount }}</span>
                        <span class="circlePoint"></span>
                        <span style="" class="dateFont">点赞:{{ value.favourCount }}</span>
                        <span class="circlePoint"></span>
                        <span style="" class="dateFont">收藏:{{ value.collectCount }}</span>
                        <span class="circlePoint"></span>
                        <span style="" class="dateFont">评论:{{ value.commentCount }}</span>
                        <span class="circlePoint"></span>
                        <span style="" class="dateFont">发布时间:{{ value.uploadTime }}</span>
                    </div>
                    <div class="flex align-center space-between" style="width: 80px">
                        <el-button @click="editResource" type="text">编辑</el-button>
                        <el-dropdown>
                            <el-button type="text">
                                <img src="../../assets/img/more.svg" alt="" style="width: 20px;">
                            </el-button>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item @click="download">下载</el-dropdown-item>
                                    <el-dropdown-item @click="deleteResource"> 删除</el-dropdown-item>
                                    <el-dropdown-item @click="copyUrl">复制链接</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>

                    </div>
                </div>

            </div>
        </div>
        <el-divider style="margin:0;width: 100%"/>
    </div>
</template>

<style scoped>
.sumFont {
    line-height: 20px;
    color: #999aaa;
    font-weight: 400;
    font-size: 14px;
    min-height: 40px;
    display: flex;
    align-items: center;
}
.circlePoint{
    margin: 0 5px;
    display: inline-block;
    width: 3px;
    height: 3px;
    background: #555666;
    vertical-align: middle;
    border-radius: 50%;
}

.dateFont {
    color: #999aaa;
    font-weight: 400;
    font-size: 14px;
}

.title {
    line-height: 23px;
    font-size: 14pt;
    color: #555666;
    font-weight: 500;
}
.title:hover{
    text-decoration: underline;
}
</style>

